<!-- 课程分类页面 -->
<template>
	<view class="category">
		<!-- 左侧一级分类 -->
		<scroll-view class="left noScorll" scroll-y >
			<view class="title">
				<view v-for="(categoryitem, index) in categoryList" :key="index" 
				:class="{active:index === activeIndex}" @click.stop="getLabel(index, categoryitem)">{{categoryitem.name}}</view>
			</view>
		</scroll-view>
		<!-- 右侧二级分类 -->
		<scroll-view class="right" scroll-y >
			<view class="tag">
			<view v-for="(labelitem, index) in labelList" :key="index"
				@click.stop="clickLabel(labelitem)"
			>
				{{labelitem.name}}
			</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/category.js'
	export default {
		
		props: {
					// 搜索页将当前组件作为子组件，传递了对应`分类标题处`的对象
					// 下拉弹窗中的分类数据
					value: {
						type: Object,
						
					}
		},		
		data() {
			return {
				categoryList: [], //左侧分类数据
				labelList: [], // 右侧标签数据
				categoryIndex: 1,
				activeIndex: 0, //当前选中的下标(分类下标)
				// activeCategoryName:'',
			}
		},
		
		mounted() {
			// 查询分类数据
			this.getList()
		},
		
		methods: {
			
			// 初始化查询一级分类及标签信息， 
			async getList() {
				const {data} = await api.getCategoryList()
				this.categoryList = data
				
				// 如果有value值，则是在down传递了value参数，就是在搜索页面使用了category组件
				if(this.value) {
					//针对每个分类下的标签列表，向标签列表第1个元素中添加`不限`
					this.categoryList.forEach((item,index)=> {
						// id 标签id, name用于在标签列表中显示，cname分类名称用于在标题中显示，categoryId分类id用于作为条件查询
						item.labelList.unshift( 
							{ id: null, name: '不限', cname: item.name, categoryId: index + 1} 
						)
						// console.log("labelList",item.labelList)
					})
					
					
				}
				
				this.labelList = data[0].labelList
				// console.log('初始化一级分类数据',this.categoryList)
				
				// // 获取当前选中的标签列表（第1个分类的）
				// this.getLabel(this.activeIndex)
			},
			
			 // 点击一级分类显示二级标签信息
			getLabel(index,item) {
				// console.log("点击一级分类显示二级标签信息",item)
				this.activeIndex = index
				// this.activeCategoryName = item.name
										
				const activeCategory = this.categoryList[index]
				this.labelList = activeCategory.labelList
				this.categoryIndex = item.Id
				// console.log('点击一级分类数据',item)
			},
			
			
			// 点击二级标签，跳转到搜索页面(item当前标签信息)
			clickLabel(item) {
				
				item.categoryId = this.categoryIndex
				
				// 如果有value，则当前页面搜索页作为子组件，
				if(this.value) {
					// 将点击的标签信息回显到搜索页（下拉筛选）进行搜索
					this.searchPageChangeLabel(item)
					return
				}
				
				// 二级标签id,二级标签name,activeIndex是一级分类下标
				const params = { 	labelId: item.id, 
									content: item.name,
									categoryId: this.activeIndex + 1,
								}
								
				this.navTo(`/pages/search/search?params=${ JSON.stringify(params) }`)
			},
			
			// 弹窗选择标签、分类回显下拉分类处
			searchPageChangeLabel(item) {
				// 避免重复点击
				// this.value.name 上一次的分类或标签名称, item.name是当前这次点击的标签名称, item.cname当前点击的分类名称
				if(this.value.name !== item.name && this.value.name !== item.cname) {
					// 如果有cname则是不限，否则是具体标签名
					this.value.name = item.cname || item.name
					// 标签id
					this.value.id = item.id || null
					// 分类id(点击的是`不限`，就取分类id)
					this.value.categoryId = item.categoryId || null
					
					// 触发此方法，来查询对应分类或标签的数据
					this.$emit('searchByLabel', this.value)
				}
				
				// 关闭弹窗
				this.value.active = false
			}
									
		}
		
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}
	.category {
		display: flex;
		height: 100%;
		.left {
			background-color: #F8F9FB;
			width: 260rpx;
			border-radius: 0 25rpx 25rpx 0;
			.title {
				view {
					text-align: center;
					font-size: 30rpx;
					color: #888888;
					width: 100%;
					padding: 55rpx 30rpx;
					position: relative;
					&:before { // 在分类前加上|
						position: absolute;
						content: '';
						width: 0;
						height: 0;
						border-right: 6rpx solid $mxg-color-primary;
						border-radius: 30rpx;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						transition: .3s;
					}
				}
				
				.active {
					color: $mxg-color-primary;
					font-size: 33rpx;
					font-weight: bold;
					&:before {
						height: 50rpx;
					}
				}
			}
		}
		.right {
			background-color: #fff;
			padding-left: 15rpx;
			margin: 0; // 铺满
			.tag {
				display: flex;
				flex-wrap: wrap; 
				padding-top: 35rpx;
				padding-left: 10rpx;
				view {
					font-size: 25rpx;
					line-height: 60rpx;
					border: 1px solid #999;
					border-radius: 30rpx;
					min-width: 160rpx;
					text-align: center;
					padding: 0 5rpx;
					margin: 15rpx 5rpx;
				}
			}
		}
	}
</style>
